<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>EventListener</title>
    </head>
    <body>

        <button type="button">你点我一个试试！</button>

        <script type="text/javascript">

            const btn = document.querySelector( '[type=button]' );

            // EventListener可以是个函数
            let listener1 = function(){
                console.log( arguments[0] );
                btn.style.backgroundColor = '#9696fa' ;
                btn.style.color = '#ffffff' ;
            }

            btn.addEventListener( 'mouseover' , listener1 , false );

            // EventListener也可以是一个带有handleEvent函数的对象(实例)
            let listener2 = {
                handleEvent: function(){
                    console.log( arguments[0] );
                    alert( '你想咋地?咋还点两下?' );
                }
            }

            btn.addEventListener( 'dblclick' , listener2 , false );

        </script>
        
    </body>
</html>